<template>
  <div class="base-info">
    <el-descriptions class="margin-top" :column="1" title="" border>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Star />
            </el-icon>
            名称
          </div>
        </template>
        <el-input v-model="form.name" @input="handleInput" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Files />
            </el-icon>
            优先级
          </div>
        </template>
        <el-select v-model="form.priority" placeholder="" @change="changeLevel" class="select-hidden">
          <el-option v-for="item in levels" :key="item.value" :label="item.label" :value="item.value">
            <div class="flex items-center">
              <small :style="{ background: item.color + '22', borderColor: item.color }" class="dot"></small>
              <span :style="{ color: item.color }">{{ item.label }}</span>
            </div>
          </el-option>
          <template #prefix v-if="currentLevel">
            <span :style="{ color: currentLevel?.color }"> <small
                :style="{ background: currentLevel?.color + '22', borderColor: currentLevel?.color }"
                class="dot"></small>{{
                  currentLevel?.label }}</span>
          </template>
        </el-select>
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <FolderOpened />
            </el-icon>
            目录
          </div>
        </template>
        <el-tree-select v-model="form.directoryId" :data="parentDicList" check-strictly :render-after-expand="false"
          :props="defaultProps" @change="handleInput" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Document />
            </el-icon>
            说明
          </div>
        </template>
        <el-input v-model="form.description" placeholder="请输入描述" type="textarea" @change="handleEmit" />
      </el-descriptions-item>
      <el-descriptions-item>
        <template #label>
          <div class="cell-item">
            <el-icon>
              <Timer />
            </el-icon>
            创建时间
          </div>
        </template>
        {{ formatMsToLocalTime(data.createTime) }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import * as SceneApi from '@/api/scene'
import {
  Files,
  Timer,
  Document,
  Star,
  FolderOpened
} from '@element-plus/icons-vue'
import { debounce } from 'lodash-es'
import { propTypes } from '@/utils/propTypes'
import { formatMsToLocalTime } from '@/utils/formatTime'
import { useAppStore } from '@/store/modules/app'
import { useDebugStore } from '@/store/modules/debug'
import { hasDuplicateName } from '@/utils/tree'
const debugStore = useDebugStore()
const appStore = useAppStore()
const projectId = computed(() => appStore.getSelectProject)
const props = defineProps({
  data: propTypes.object.def({})
})
const form = reactive({
  id: '',
  name: '',
  priority: '',
  description: '',
  directoryId: '',
  projectId: projectId.value
})
const levels = [
  {
    color: '#E63415',
    value: 'P0',
    label: 'P0',
  },
  {
    color: '#FFDE0A',
    value: 'P1',
    label: 'P1',
  },
  {
    color: '#4167F0',
    value: 'P2',
    label: 'P2',
  },
  {
    color: '#d7d4db',
    value: 'P3',
    label: 'P3',
  }
]
const parentDicList = ref([] as any)
const defaultProps = {
  children: 'children',
  value: 'id',
  label: 'name'
}
const treeData = computed(() => debugStore.getTreeData)
const errorMessage = ref('')
const currentLevel = ref()
const emit = defineEmits(['base-info'])
/** 获取父级目录列表 */
const getParentDicList = async () => {
  const res = await SceneApi.getDicList({ projectId: projectId.value })
  parentDicList.value = res
}
/** 判断名称是否重复 */
const handleInput = debounce(() => {
  errorMessage.value = ''
  if (form.directoryId) {
    const isHasName = hasDuplicateName(treeData.value, form.directoryId, form.name)
    if (isHasName) {
      errorMessage.value = '名称不能重复！'
    }
  }
  emit('base-info', form)
}, 500)
/** 改变场景等级 */
const changeLevel = (val) => {
  currentLevel.value = levels.find(l => l.value == val)
  emit('base-info', form)
}
const handleEmit = ()=>{
  emit('base-info', form)
}
onMounted(async () => {
  await getParentDicList()
  if (props.data.name) {
    form.id = props.data.id
    form.name = props.data.name
    form.description = props.data.description
    form.directoryId = props.data.directoryId
    form.priority = props.data.priority
  }
  currentLevel.value = levels.find(l => l.value == props.data.priority)
})
</script>

<style scoped lang="scss">
.cell-item {
  display: flex;
  align-items: center;
  font-weight: bold;

  .el-icon {
    margin-right: 5px;
    font-size: 15px;
  }
}
.dot{
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 100%;
  margin-right: 5px;
}
:deep(.select-hidden) {

  .el-select__selection,
  .el-select__selected-item {
    color: transparent;
  }
}
</style>
